<template>
  <ResultList
    title="已选品牌"
    labelKey="brandAndSeriesName"
    :codeKey="codeKey"
    :tagList="selectBrands"
    @remove="handleRemoveBrand"
  />
</template>
<script>
import ResultList from './ResultList';
import { eventBus } from '../eventBus';
import { getArraysByMaps } from '@/utils/getUtils';
export default {
  components: { ResultList },
  props: {
    results: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      codeKey: 'brandAndSeriesUuid',
      selectBrands: []
    }
  },
  created () {
    eventBus.$on('selectBrand', brandsMaps => {
      this.selectBrands = getArraysByMaps(brandsMaps)
      this.$emit('update:results', this.selectBrands)
    })
  },
  watch: {
    results (list) {
      this.selectBrands = list
    }
  },
  methods: {
    handleRemoveBrand (brandInfo) {
      const filterInfos = this.selectBrands.filter(item => item[this.codeKey] != brandInfo[this.codeKey])
      this.selectBrands = filterInfos
      const codeList = filterInfos.map(item => item[this.codeKey])
      eventBus.$emit('updateSelectBrands', codeList)
    },
    clearResults () {
      this.selectBrands = []
      eventBus.$emit('updateSelectBrands', [])
    }
  }
}
</script>
